<template>
    <el-container direction="vertical">
        <div>
            <div style="min-height: 270px;">
                <div style="width: 50%;text-align: center;float: left;">
                    <!-- <el-button @click="dialog = true" type="primary" style="margin-left: 16px;">
                      打开输入页面
                    </el-button> -->
                    <div class="main">
                        <el-form label-width="80px">
                            <el-form-item label="包名">
                                <el-select v-model="App" placeholder="请选择活动区域">
                                    <el-option label="手迹造字" value="com.handwriting.makefont"></el-option>
                                    <el-option label="写字先生" value="com.font"></el-option>
                                </el-select>
                            </el-form-item> 
                            <el-form-item label="设备ip">
                                <el-input v-model="Ip" style="width: 180px;"></el-input>
                            </el-form-item> 
                        </el-form>
                    </div>
                    <div class="demo-drawer__footer">
                        <el-button type="primary" @click="Check">开始执行</el-button>
                    </div>
                    
                </div>
                <div class="demo-image__preview" v-if="screenlist.length>0 && !screenShow" style="width: 50%;text-align: center;float: right;">
                    <el-image 
                    style="max-width: 10%;"
                    :src="screenlist[0]" 
                    :preview-src-list="screenlist">
                    </el-image>
                </div>

                <!-- <div v-if="CheckRes !=''" style="width: 30%;height:500px;background-color: blue;float: right;
    text-align: center;">
                    <p>渠道检查完毕  {{CheckRes}}</p>
                </div> -->
                
            </div>
            <el-drawer
                title="结果截图"
                :visible.sync="screenShow"
                direction="rtl">
                <div style="margin-left: 1%;height: 700px;overflow:auto;" >
                    <div class="el-col el-col-10 el-col-offset-2" v-for="item in screenlist">
                        <el-card body-style= '2px' style="margin-top: 5px;">
                            <img :src="ServiceIP+item" class="image">
                        </el-card>
                    </div>
                </div>
            </el-drawer>
            <el-drawer
                title="渠道检查"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="ltr"
                custom-class="demo-drawer"
                ref="drawer"
                >
                <div class="demo-drawer__content">
                    <div class="main">
                        <el-form label-width="80px">
                            <el-form-item label="包名">
                                <el-select v-model="App" placeholder="请选择活动区域">
                                    <el-option label="手迹造字" value="com.handwriting.makefont"></el-option>
                                    <el-option label="写字先生" value="com.font"></el-option>
                                </el-select>
                            </el-form-item> 
                            <el-form-item label="设备ip">
                                <el-input v-model="Ip" style="width: 180px;"></el-input>
                            </el-form-item> 
                        </el-form>
                    </div>
                    <div class="demo-drawer__footer">
                        <el-button type="primary" @click="Check">开始执行</el-button>
                    </div>
                </div>
            </el-drawer>
            <el-divider></el-divider>
            

            

            <div v-show="div_show" class="checkRes">
                <div class="divlog">
                    <div><H1>日志 <el-button @click="ScoketInit()">重新连接</el-button></H1></div>
                    <div style="height: 600px;"><p id="log"></p></div>
                    
                </div>
                <div class="divpic">
                    <div> <H1>图像</H1> <el-button  @click="iReload">刷新</el-button></div>
                    <iframe width="100%" height="810px" frameborder="0" :src="ip" style="text-align: center;"  id="ifrmid"></iframe>
                </div>
                

            </div>
           <!--  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
            </ul> -->
        </div>
    </el-container>
</template>

<script>
import {ChannelCheck} from '../../api/api'
import {shijianchuo} from '../../js/dates'
import { v4 as uuidv4 } from 'uuid';
export default {
    name: 'CheckChannel',
    data(){
        return { 
            App: "com.handwriting.makefont",
            Ip: "192.168.247.185",
            ip:"",
            div_show:false,
            SocketSuc:false,
            SckErrshow : false,
            loading: false,
            html: '',
            logLine:0,
            dialog:false,
            CheckRes: "",
            tmpMsg:"",
            screenlist :[ ],
            ServiceIP:"",
            screenShow:false,
        }
    },
    watch: {
    },
    mounted:function () {
        this.GetServiceIP();
        // this.ScoketInit()
        // this.ip = "http://"+this.Ip+':7912/remote'
    },//mounted
    destroyed: function() {
    　　　　//页面销毁时关闭长连接
        this.websocketclose();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        GetServiceIP(){
            var that = this;
            that.ServiceIP = document.location.origin;
        },
        ScoketInit(){
            var that = this;
            that.Logsocket = new WebSocket('ws://'+window.location.host+'/v1/websockit/cclog');
            // that.Logsocket = new WebSocket('ws://192.168.248.228:8000/v1/websockit/cclog');
            that.Logsocket.onopen = that.open
            that.Logsocket.onerror = that.error
            that.Logsocket.onmessage = that.getMessage
            that.Logsocket.onclose = that.websocketclose;
            that.LogMsg =  document.getElementById("log")
            setInterval(this.Send, 1000);
        },
        appendLog(item) {
            var doScroll = this.LogMsg.scrollTop > this.LogMsg.scrollHeight - this.LogMsg.clientHeight - 1;
            this.LogMsg.appendChild(item);
            if (this.logLine > 30){
                this.clearLog()
                this.logLine = 0
            }
            if (doScroll) {
                this.LogMsg.scrollTop = this.LogMsg.scrollHeight - this.LogMsg.clientHeight;
            }
            
            this.logLine +=1
        },
        clearLog(){
            while(this.LogMsg.hasChildNodes()){
                this.LogMsg.removeChild(this.LogMsg.firstChild);
            } 
        },
        getMessage: function (msg) {
            var item = document.createElement("div");
            item.innerText = msg.data;
            
            
            
            if (msg.data.indexOf("channels") != -1 && this.screenlist.length == 0){
                var tmpdata = msg.data
                this.screenlist = []
                var sss = JSON.parse(tmpdata);
                if (typeof(sss) == "string") {
                    sss = JSON.parse(sss);
                }
                this.screenlist = sss.screen;
                this.CheckRes = sss;
                this.screenShow = true;
                console.log(sss.screen);
                
            }else if (msg.data == "" ){
                
            }else if (this.tmpMsg != msg.data) {
                this.tmpMsg = msg.data
                this.appendLog(item);
            }


        },
        open: function () {
            this.SocketSuc = true;
            console.log("socket连接成功")
            // this.Send();
            this.$notify({
                title: 'socket连接成功',
                message: 'socket连接成功'
            });

        },
        error: function () {
            this.$notify({
                title: 'socket异常',
                message: '连接错误',
                type: 'warning'
            });
        },
        Send() {
            var that = this;
            if (that.SocketSuc){
                // that.Logsocket.send("CheckChannel");
                that.Logsocket.send("CheckChannel"+that.Ip);
            }else{
                if (!that.SckErrshow ){
                    that.$notify({
                        title: 'socket异常',
                        message: 'socket未连接',
                        type: 'warning'
                    });
                    that.SckErrshow = true;
                }
                
            }
        },
        websocketclose(e){  //关闭
            this.SocketSuc = false;
            this.$notify.error({
                title: 'socket异常',
                message: 'socket断开连接'+e,
            });
        },
        iReload(){
            this.ip = "http://"+this.Ip+':7912/remote'+"?"+shijianchuo()
            // document.getElementById("ifrmid").contentWindow.location.reload(true);
        },
        Check(){
            this.dialog= false;
            this.CheckRes = "";
            this.screenlist = [];
            this.ScoketInit()
            this.ip = "http://"+this.Ip+':7912/remote'
            this.div_show = true;
            var that = this;
            let par = {"Ip":that.Ip,"App":that.App}
            ChannelCheck(par).then(res =>{
                let {code,msg,data} = res;
                console.log(code,msg,data);
                if (code != 200){
                    const h = that.$createElement;
                    that.$message({
                        message: h('p', null, [
                        h('span', null, '接口返回 '),
                        h('i', { style: 'color: teal' }, data)
                        ])
                    });
                    return
                }


            }).catch(
                function(error) {
                  that.$message.error("接口失败:\n"+error);
                }
            )
        }
    }
}
</script>

<style>
.main {
    margin-left: 5%;
    margin-right: 5%; 
    padding: 10px;
    margin-top: 20px;
    /*width: 400px;*/
    height: 200px;
    border-radius:15px;
    text-align: center;
    background-color: rgba(231, 219, 219, 0.8);
    margin-bottom: 10px;
}
.divlog{
    /*background-color: #D3E723;*/
    text-align: center;
    width: 50%;
    float: right;
    margin-left: 0px;
    height: 800px;
    /*position: absolute;*/
}
.divpic {
    width: 30%;
    height: 810px;
    float: left;
    text-align: center;
    
    -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
    -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/
    -o-transition: .5s ease-in-out;
    /*position: absolute;*/
}
#log {
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    /*position: absolute;*/
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}
/*.divpic{
    overflow: hidden;
    width: 50%;
    height: 810px;
    float: right;
    text-align: center;
}*/



.divpic:HOVER {
margin-left: 0px;
}

.checkRes{
    margin-top: 5%;
}
.image{
   /* width: 100%;
    display: block;*/
 /*   max-width: 80%;
    max-height: 80%; */
}
</style>